<template>
	<view class="boxbg">
		<!-- @scale="changeScale" -->
		<!-- <movable-area :style="{height: '100%',width: '100%'}"> -->
		<!-- <movable-view :scale="true" :scale-max="1" :scale-min="0.5" class="max" direction="all"
				:style="{width: `${treeConfig.width}px`,height: `${treeConfig.height}px`}"> -->
		<div class="tree-content">
			<tree-list @selItem="selItem" :tree-data="treeData" :tree-first="true" />
		</div>
		<!-- </movable-view> -->
		<!-- </movable-area> -->
		<movable-area :style="{height: '100%',width: '100%'}" v-if="!psData.img">
			<!-- disabled -->
			<movable-view :scale="true" :scale-max="0.6" :scale-min="0.5" class="max" direction="horizontal"
				:style="{width: `${treeConfig.width}px`,height: `${treeConfig.height}px`}" inertia>
				<view class="tree-content temp">
					<Template :data="psData" />
				</view>
				<view class="">可拖动缩放</view>
			</movable-view>
		</movable-area>
		<!-- <TemplateTwo /> -->

		<view class="img" v-else>
			<image @click="priview(psData.img)" :src="psData.img" mode="widthFix"></image>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		familyTree,
		psQuery
	} from '@/api/ancestra.js';
	import Template from '@/components/template.vue';
	// import TemplateTwo from '@/components/templateTwo.vue';
	let treeConfig = ref({ // movable-view移动区域大小
		width: 0,
		height: 70
	})

	let treeData = ref([])
	let type = ref(null);
	let data = ref({});
	onLoad((e) => {
		familyTree({
			id: e.id
		}).then((res) => {
			console.log(res, '======');
			treeData.value = res.data
			data.value = res.data[0];
			selData();
		});
	});

	// 查询普书
	const psData = ref({});
	const selData = async () => {
		let newData = JSON.parse(JSON.stringify(data.value));
		const res = await psQuery(newData);
		if (res.code == 200) {
			psData.value = res.data;
			console.log(psData.value, 'psData.value')
		}
		console.log(res, 'res');
	};

	const setTreeConfig = () => {
		nextTick(() => {
			setTimeout(() => {
				getDomInfo('.tree-content').then(res => {
					Object.assign(treeConfig.value, {
						width: res.width / scale.value,
						height: res.height / scale.value
					});
				})
			}, 100)
		})
	}

	// 点击树
	const selItem = async (item) => {
		let newData = JSON.parse(JSON.stringify(item))
		if (newData.child) delete newData.child
		const res = await psQuery(newData)
		if (res.code == 200) {
			psData.value = res.data
		}
	}

	// 图片预览
	const priview = (img) => {
		uni.previewImage({
			urls: [img],
			current: 1
		})
	}
</script>

<style scoped lang="scss">
	.img {
		image {
			width: 100%;
		}
	}

	.tree-content {
		display: flex;
		justify-content: center;
	}

	.temp {
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;
	}

	.boxbg {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: auto;
		box-sizing: border-box;

		&>view {
			display: flex;
			height: 100%;
			width: 100%;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 138rpx;
				border-right: 1rpx solid #555555;
				height: 80rpx;
				border-bottom: 1rpx solid #555555;
				font-size: 28rpx;
			}
		}

		.tt {
			view {
				font-weight: bold;
				color: darkred;
			}
		}
	}
</style>